<!--
  * @Author: zhw 443844039@qq.com
  * @Date: 2025-08-23 19:51:13
 * @LastEditors: zhw 443844039@qq.com
 * @LastEditTime: 2025-08-24 16:39:00
  * @Description: 资源建设成果
 -->
 <template>
  <div class="container">
    <div id="researchChart" ref="researchChart" class="chart-container"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { theResourceConstructionApi } from '@/api/LeadershipCockpit/index'

export default {
  data() {
    return {
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.researchChart)
      theResourceConstructionApi().then(res => {
        let xData = [];
        let downloadTotal = [];
        let uploadTotal = []
        res.data.map(t=>{
          xData.push(t.collage_name)
          downloadTotal.push(t.download_total)
          uploadTotal.push(t.upload_total)
        })
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            y:'bottom',
          },
          xAxis: {
            type: 'category',
            data: xData
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: `{value}次`
            }
          },
          series: [
            {
              name: '上传量',
              type: 'bar',
              stack: 'total',
              barWidth: 30,
              emphasis: {
                focus: 'series'
              },
              data: uploadTotal,
              itemStyle: {
                color: '#6A6E88'
              }
            },
            {
              name: '下载量',
              type: 'bar',
              stack: 'total',
              barWidth: 30,
              // label: {
              //   show: true,
              //   position: 'top',
              //   formatter: function (params) {
              //     return params.value;
              //   }
              // },
              emphasis: {
                focus: 'series'
              },
              data: downloadTotal,
              itemStyle: {
                color: '#FF7345'
              }
            }
          ]
        }
        chart.setOption(option)
      })
    }
  }
}
</script>

<style scoped>
.container{
  margin: 12px;
}

.header {
  margin-bottom: 12px;
}

.title-wrapper {
  display: flex;
  align-items: center;
}

.blue-line {
  width: 4px;
  height: 24px;
  background-color: #1E62FF;
  margin-right: 12px;
  border-radius: 2px;
}

.header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
  font-weight: 500;
}

.chart-container {
  width: 100%;
  height: 400px;
}
</style>